<template>
    <section>
    <nav-header :keyword="keyword"></nav-header>
        <div style="background-color: rgb(245,245,245);height: 50px;">
            <span style="line-height:50px;font-size: 15px;margin-left: 13.8%"> 首页 > 全部 > 口红</span>
        </div>
        <div style="height: 50px">
            <ul class="ul-list" style="margin-left: 150px;margin-top: 10px">
                <li>
                    <a href="javascript:;" class="static" v-bind:class="{ dfta: 1==index}" @click="changeColor(1)">综合 </a> <span style="margin-left: 20px"> |</span>
                </li>
                <li>
                    <a href="javascript:;" class="static" v-bind:class="{ dfta: 2==index}" @click="changeColor(2)">价格 </a><span style="margin-left: 20px"> |</span>
                </li>
                <li>
                    <a href="javascript:;"class="static" v-bind:class="{ dfta: 3==index}" @click="changeColor(3)">销量 </a>
                </li>


            </ul>
        </div>
        <div class="content" style="background-color: rgb(245,245,245)">
            <div class="" id="box">
                <ul>
                    <li v-for="v in phoneList">
                        <a v-bind:href="'/#/product/'+v.id"><img v-bind:src="v.mainImage" alt="" style="margin-top: 20px"></a>
                        <p style="width: 147px;text-align: center;margin-left: 40px">{{v.subtitle}}</p>
                        <p style="text-align: center;margin-right: 55px;color: #FF6600">￥{{v.price}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>
<script>
    import NavHeader from './../components/NavHeader'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import ProductParam from './../components/ProductParam'
    export default{
        name:'ProductList',
        components:{
            swiper,
            swiperSlide,
            ProductParam,
            NavHeader
        },
        data(){
            return {
                keyword:this.$route.params.keyword,
                index:1,
                isActive:1,
                phoneList:[],
                showSlide:'',//控制动画效果
                product:{},//商品信息
                swiperOption:{
                    autoplay:true,
                    slidesPerView:3,
                    spaceBetween: 30,
                    freeMode: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable :true,
                    }
                }
            }
        },
        created(){
          let key=this.$route.params.keyword
            if(key!=null){
                this.axios.get("/search/"+key+"/"+this.index).then(res=>{
                    this.phoneList=res
                })
            }
        },
        watch: {
            //监听指定数据的变化,只要变化就会触发
            'keyword': function (newVal, oldVal) {
                alert("newVal, oldVal:" + newVal + "," + oldVal)
            }
        },
        mounted(){
            let id = this.$route.params.id;
            if (id!=null){
                this.axios.get('/products', {
                    params: {
                        categoryId: id,
                        pageSize: -1
                    }
                }).then((res) => {
                    this.phoneList=res.productList
                })
            }

        },
        methods:{
            changeColor(index){
                let id = this.$route.params.id;
                this.index=index
                this.axios.get('/productListByType/'+id+'/'+index).then((res) => {
                    this.phoneList=res
                })
            },
            getProductInfo(){
                let id = this.$route.params.id;
                // this.axios.get(`/products/${id}`).then((res)=>{
                this.axios.get(`/products/1`).then((res)=>{
                    this.product = res;
                })
            },
            buy(){
                let id = this.$route.params.id;
                this.$router.push(`/detail/${id}`);
            },
            closeVideo(){
                this.showSlide='slideUp';
                setTimeout(()=>{
                    this.showSlide='';
                },600)
            }
        }
    }
</script>
<style lang="scss">
    @import './../assets/scss/mixin.scss';
    @import './../assets/scss/config.scss';
.static{
    color: black;
}
    .dfta{
        color: pink;
    }
    .ul-list li{
        margin-left: 20px;
        float: left;
        height: 35px;
        line-height: 35px;
        text-align: center;
    }
    .ul-list li a{
        font-size: 15px;
        margin-left: 20px;
    }
    #box ul{
        display: flex;
        flex-wrap: wrap;
        margin-left: 10%;
    }
    #box li{
        width: 250px;
        padding: 5px;
        list-style: none;
        margin-right: 5px;
        /*border: 1px solid #eee;*/
    }
    #box img{
        width: 250px;
        height: 300px;
    }
</style>